<template>
  <a-modal
    title="推送人员"
    width="90%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="form"
        v-bind="layout"
        :model="model"
        :rules="validatorRules"
      >
        <!-- 树-->
        <a-col :md="8" :sm="24">
          <template>
            <a-input-search
              @search="onSearch"
              style="width: 100%; margin-top: 10px"
              placeholder="请输入部门名称"
            />
            <!--组织机构-->
            <a-tree
              showLine
              :selectedKeys="selectedKeys"
              :checkStrictly="true"
              @select="onSelect"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :treeData="departTree"
              :autoExpandParent="autoExpandParent"
              :expandedKeys="iExpandedKeys"
              @expand="onExpand"
            />
          </template>
        </a-col>
        <a-col :md="16" :sm="24">
          <!-- <DeptUser ref="DeptUserInfo"></DeptUser> -->
        </a-col>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { queryMyDepartTreeList, searchByKeywords } from "@/api/api";
import { ListMixin } from "@/mixins/ListMixin";
// import DeptUser from "@/components/Control/JDepartMultiModel/DeptUser.vue";
export default {
  mixins: [ListMixin],
  name: "RoleModal",
  data() {
    return {
      currentDeptId: "",
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
      currFlowId: "",
      currFlowName: "",
      disable: true,
      treeData: [],
      visible: false,
      departTree: [],
      rightClickSelectedKey: "",
      hiding: true,
      model: {},
      dropTrigger: "",
      depart: {},
      disableSubmit: false,
      checkedKeys: [],
      selectedKeys: [],
      autoIncr: 1,
      currSelected: {},
      form: this.$form.createForm(this),
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 },
      },
      graphDatasource: {
        nodes: [],
        edges: [],
      },
      userIdentity: "",
      confirmLoading: false,
      validatorRules: {
        roleName: [
          { required: true, message: "请输入任务名称!" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        roleCode: [
          { required: true, message: "请输入任务名称!" },
          { min: 0, max: 64, message: "长度不超过 64 个字符", trigger: "blur" },
          { validator: this.validateRoleCode },
        ],
        description: [
          {
            min: 0,
            max: 126,
            message: "长度不超过 126 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  components: {
    // DeptUser,
  },
  methods: {
    callback(key) {
      ////   console.log(key)
    },
    handleOk() {
      //   console.log(this.$refs.DeptUserInfo.selectedRowKeys);
  
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    loadData() {
      this.refresh();
    },
    clearSelectedDepartKeys() {
      this.checkedKeys = [];
      this.selectedKeys = [];
      this.currentDeptId = "";
      this.$refs.DeptUserInfo.currentDeptId = "";
      this.$refs.DeptRoleInfo.currentDeptId = "";
    },
    loadTree() {
      var that = this;
      that.treeData = [];
      that.departTree = [];
      queryMyDepartTreeList().then((res) => {
        if (res.success && res.result) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i];
            that.treeData.push(temp);
            that.departTree.push(temp);
            that.setThisExpandedKeys(temp);
            // //   console.log(temp.id)
          }
          this.loading = false;
        }
        that.userIdentity = res.message;
      });
    },
    setThisExpandedKeys(node) {
      //只展开一级目录
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key);
        //下方代码放开注释则默认展开所有节点
        /**
          for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
          */
      }
    },
    refresh() {
      this.loading = true;
      this.loadTree();
    },

    onExpand(expandedKeys) {
      // //   console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    onSearch(value) {
      let that = this;
      if (value) {
        searchByKeywords({ keyWord: value, myDeptSearch: "1" }).then((res) => {
          if (res.success) {
            that.departTree = [];
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i];
              that.departTree.push(temp);
            }
          } else {
            that.$message.warning(res.message);
          }
        });
      } else {
        that.loadTree();
      }
    },
    onCheck(checkedKeys, e) {
      let record = e.node.dataRef;
      this.checkedKeys = [];
      this.currentDeptId = record.id;
      this.$refs.DeptUserInfo.open(record);
      this.hiding = false;
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]];
      }
      let record = e.node.dataRef;
      this.checkedKeys.push(record.id);
      this.$refs.DeptUserInfo.open(record);
    },
  },
  created() {
    this.currFlowId = this.$route.params.id;
    this.currFlowName = this.$route.params.name;
    // this.loadTree()
  },
};
</script>

<style lang="scss">
@import "@/assets/css/newrModule.scss";
</style>